<template>
  <view class="container">
    <view class="input-container">
      <input 
        class="input" 
        type="text" 
        placeholder="请输入手机号" 
        v-model="mobile" 
        @input="validateMobile"
      />
    </view>
    <view class="input-container code-container">
      <input 
        class="input code-input" 
        type="text" 
        placeholder="请输入验证码" 
        v-model="code" 
        maxlength="4"
      />
      <button 
        class="code-button" 
        :disabled="!canSendCode || countdown > 0"
        @click="sendCode"
      >
        {{ countdown > 0 ? `${countdown}s后重新发送` : '发送验证码' }}
      </button>
    </view>
    <button 
      class="login-button" 
      :disabled="!canLogin" 
      @click="login"
    >
      登录
    </button>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.input-container {
  width: 100%;
  margin: 15px 0;
  position: relative;
}

.input {
  width: 100%;
  padding: 10px 0px 10px 10px ;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.code-container {
  display: flex;
  align-items: center; 
}

.code-input {
  flex: 1;
  margin-right: 10px; 
}

.code-button {
  /* padding: 10px 15px; */
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
}

.login-button:disabled, .code-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

<script> 
import request  from '@/utils/request.js';

export default {
  data() { 
    return {
      mobile: '',
      code: '',
      countdown: 0, 
      canSendCode: false,
      canLogin: false 
    };
  },
  onShow(){
	  this.mobile = '18129290467';
	  this.code = '9999'
	  	console.log("helo-")   
  },  
  methods: {

    validateMobile() {
      const mobileRegex = /^1[3-9]\d{9}$/;
      this.canSendCode = mobileRegex.test(this.mobile);
      this.canLogin = this.canSendCode && this.code.length === 4;
    },
    sendCode() {
      if (!this.canSendCode) return;
      
      request({
        url: '/api/auth/sms-send',
        method: 'POST',
        data: {
          mobile: this.mobile 
        },
        success: (res) => {
          if (res?.status == 200) {
            uni.showToast({
              title: '验证码已发送',
              icon: 'success'
            });
            this.startCountdown();
          } else {
            uni.showToast({
              title: res?.msg || '发送失败',
              icon: 'none'
            });
          }
        }
      });
    },
    startCountdown() {
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    login() {
      if (!this.canLogin) return;

      request({
        url: '/api/auth/sms-login',
        method: 'POST',
        data: {
          mobile: this.mobile,
          code: this.code
        }, 
        success: (res) => {
          if (res?.status == 200) {
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            // 保存数据到本地缓存
            uni.setStorage({
              key: 'user',
              data: res.data.user
            });
            uni.setStorage({
              key: 'token',
              data: res.data.token
            });
            // 跳转到首页或其他页面
            uni.navigateBack();
          } else {
            uni.showToast({
              title: res.msg || '登录失败',
              icon: 'none'
            });
          }
        }
      });
    } 
  },
  watch: {
    code(val) {
      this.canLogin = this.canSendCode && val.length === 4;
    }
  }
};
</script>
